<script lang="ts" setup>
import { ref, watchEffect } from "vue"

interface Emits {
  (e: "change", payload: { keyword: string, city: string | undefined, minDaySalary: number, maxDaySalary: number }): void
}

const emit = defineEmits<Emits>()

const keyword = ref("")
const city = ref<string>()
const salary = ref<[number, number]>([80, 200])

watchEffect(() => {
  emit("change", {
    keyword: keyword.value.trim(),
    city: city.value,
    minDaySalary: salary.value[0],
    maxDaySalary: salary.value[1]
  })
})

const CITY_OPTIONS = [
  { label: "广州", value: "广州" },
  { label: "深圳", value: "深圳" },
  { label: "佛山", value: "佛山" },
  { label: "珠海", value: "珠海" }
]
</script>

<template>
  <el-card class="filters" shadow="never">
    <div class="filters-row">
      <el-input v-model="keyword" placeholder="输入职位/公司关键词" clearable style="max-width: 280px" />
      <el-select v-model="city" placeholder="选择城市" clearable style="max-width: 180px; margin-left: 12px">
        <el-option v-for="it in CITY_OPTIONS" :key="it.value" :label="it.label" :value="it.value" />
      </el-select>
      <div class="salary">
        <span>日薪：</span>
        <el-slider v-model="salary" range :min="50" :max="300" style="width: 220px" />
        <span class="val">{{ salary[0] }}-{{ salary[1] }} 元/天</span>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.filters {
  margin-bottom: 12px;
}
.filters-row {
  display: flex;
  align-items: center;
}
.salary {
  display: flex;
  align-items: center;
  margin-left: 16px;
  .val {
    margin-left: 8px;
    color: var(--el-text-color-secondary);
  }
}
</style>
